<template>
  <div>
    <label for="number">选项个数<input type="number" id="number" name="count" v-model="optionNum"></label>
    <ul>
      <li v-for="item in options" :key="item.id" :value="item.value">{{item.text}}</li>
    </ul>
  </div>
</template>

<script>
import uuidV1 from 'uuid/v1'

export default {
  name: 'CheckProp',
  props: ['instanceId'],
  data () {
    return {
      options: []
    }
  },
  methods: {},
  computed: {
    optionNum: {
      set (value) {
        if (Number.isInteger(value)) {
          if (value < 1) {
            value = 1
          }
          if (value > this.options.length) {
            let incNum = this.options.length - value
            for (let i = 0; i < incNum; i++) {
              this.options.push({
                id: uuidV1(),
                text: '默认文本',
                value: 0
              })
            }
          } else {
            this.options = this.options.splice(0, value)
          }
        }
      },
      get () {
        return this.options.length
      }
    },
    checkName: {
      get () {
        return this.$store.state.formDesigner.data[this.instanceId]['checkName']
      },
      set (value) {
        this.$store.commit('formDesigner/setData', {
          instanceId: this.instanceId,
          propId: 'checkName',
          value: value
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
